{% extends 'checkstand/base/index.html' %}
{% load staticfiles %}
{% block css %}
    <link href="{% static 'bootstrapt/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
{% endblock %}
{% block nav_day %}class="active"{% endblock %}
{% block js %}
    <script src="{% static 'bootstrapt/js/echarts.min.js' %}"></script>
    <script src="{% static 'bootstrapt/js/walden.js' %}"></script>
    <script src="{% static 'bootstrapt/js/bootstrap-datetimepicker.js' %}"></script>
    <script src="{% static 'bootstrapt/js/bootstrap-datetimepicker.zh-CN.js' %}"></script>
{% endblock %}


{% block html_content %}
    <div class="row">
        <form class="form-horizontal " role="form">
            <legend>日收入分析</legend>
            <div class="form-group">
                <div class="col-md-2">
                </div>
                <div class="col-md-2">
                    <label for="dtp_input" class="control-label pull-right">日期选择：</label>
                </div>
                <div class="input-group date form_date col-md-3" data-date=""
                     data-date-format="yyyy-mm-dd"
                     data-link-field="dtp_input" data-link-format="yyyy-mm-dd">
                    <input class="form-control" type="text" id="dtp_input" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <div class="col-md-1">
                    <input type="button" class="button button-primary button-small" onclick="querySubmit();"
                           value="查询">
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </form>
    </div>


    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        日销量总览
                    </h3>
                </div>
                <div class="panel-body">
                    <div id="main1" style="width:auto;height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        日菜品销量柱状图
                    </h3>
                </div>
                <div class="panel-body">
                    <div id="main" style="width:auto;height:400px;"></div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        日菜品销量详情
                    </h3>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>菜名</th>
                            <th>份数</th>
                        </tr>
                        </thead>
                        <tbody id="sales">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        日订单详情
                    </h3>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>订单号</th>
                            <th>桌号</th>
                            <th>下单时间</th>
                            <th>总价</th>
                        </tr>
                        </thead>
                        <tbody id="income">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block modal %}{% endblock %}
{% block js_content %}
    <script>
        $(document).ready(function () {
            $('.form_date').datetimepicker({
                language: 'zh-CN',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });

            fistSubmit()
        })

        function fistSubmit() {
            var today = new Date()
            var year = today.getFullYear()
            var month = today.getMonth() + 1
            var day = today.getDate()
            var time = year + '-' + month + '-' + day
            $("#dtp_input").val(time)
            ajaxPost(time)
        }

        function querySubmit() {
            var time = $("#dtp_input").val();
            if (time == "") {
                $.scojs_message("输入为空", $.scojs_message.TYPE_ERROR);
            } else {
                ajaxPost(time)
            }

        }

        function crtTimeFtt(val) {
            if (val != null) {
                var date = new Date(val);
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + "  " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
            }
        }

        function orderList(data) {
            var html
            var orderModel
            var order
            if (data != null) {
                orders = JSON.parse(data)
                for (var i in orders) {
                    orderModel = orders[i]
                    order = orderModel.fields
                    html += ("<tr>" +
                        "<td>" + orderModel.pk + "</td>" +
                        "<td>" + order.desk + "</td>" +
                        "<td>" + crtTimeFtt(order.time) + "</td>" +
                        "<td>" + order.totle_price + "</td>" +
                        "</tr>")
                }
            } else {
                html = ''
            }
            $("#income").html(html)
        }

        function salesList(data) {
            var html
            if (data != null) {
                orderedmenus = JSON.parse(data)
                for (var key in orderedmenus) {
                    html += ("<tr>" +
                        "<td>" + key + "</td>" +
                        "<td>" + orderedmenus[key] + "</td>"
                    )
                }

            } else {
                html = ''
            }
            $("#sales").html(html)

        }


        function ajaxPost(time) {
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "{% url 'checkstand:ajax_income_day' %}",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {time: time},
                success: function (data) {
                    {#alert(data.orders)#}
                    {#alert(data.orderedmenus)#}
                    {#alert(data.menuincome)#}
                    if (data.state == 'success') {
                        var menuIncome = JSON.parse(data.menuIncome)
                        var menuSales = JSON.parse(data.menuSales)
                        var menuKind = JSON.parse(data.menuKind)
                        var dayIncomeKeys = []
                        var dayIncomeValues = []
                        var daySalesKeys = []
                        var daySalesItems = []
                        var salesSum = 0
                        var incomeSum = 0
                        for (var key in menuIncome) {
                            dayIncomeKeys.push(key)
                            dayIncomeValues.push(menuIncome[key])
                            incomeSum += menuIncome[key]
                        }
                        for (var key in menuKind) {
                            daySalesKeys.push(key)
                            daySalesItems.push({'value': menuKind[key], 'name': key})
                            salesSum += menuKind[key]
                        }
                        orderList(data.orders)
                        salesList(data.menuSales)
                        dayvolume(daySalesKeys, daySalesItems, salesSum)
                        dayincome(dayIncomeKeys, dayIncomeValues, incomeSum)
                    } else {
                        $.scojs_message('没找到' + time + '相关订单', $.scojs_message.TYPE_ERROR);
                        var dayIncomeKeys = []
                        var dayIncomeValues = []
                        var daySalesKeys = []
                        var daySalesItems = []
                        var salesSum = 0
                        var incomeSum = 0
                        orderList(data.orders)
                        salesList(data.menuSales)
                        dayvolume(daySalesKeys, daySalesItems, salesSum)
                        dayincome(dayIncomeKeys, dayIncomeValues, incomeSum)
                    }

                },

            })
        }

        function dayincome(key, value, sum) {
            var histogram = echarts.init(document.getElementById('main'), 'walden');
            var option = {
                title: {
                    text: '菜品日收入：' + sum,
                    subtext: '单位（元）'
                },
                tooltip: {},
                legend: {
                    data: ['收入']
                },
                xAxis: {
                    data: key
                },
                yAxis: {},
                series: [{
                    name: '收入',
                    type: 'bar',
                    data: value
                }]
            };
            histogram.setOption(option);
        }

        function dayvolume(key, item, sum) {
            var pie = echarts.init(document.getElementById('main1'), 'walden');
            option = {
                title: {
                    text: '菜品日销量：' + sum,
                    subtext: '单位（份）',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: key
                },
                series: [
                    {
                        name: '日销量',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: item,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            pie.setOption(option);
        }
    </script>
{% endblock %}




